<template>
  <Header :style="{padding:0}" class="layout-header-bar">
    <Row>
      <i-col flex="64px">
        <Icon @click="collapsedSide" :class="rotateIcon" :style="{margin:'20px 20px',cursor:'pointer'}"
              type="md-menu" size="24"></Icon>
      </i-col>
      <i-col flex="auto">
        <CustomBreadCrumb style="margin-left: 20px"></CustomBreadCrumb>
      </i-col>
      <i-col flex="auto">
        <div class="custom-content-con">
          <slot></slot>
        </div>
      </i-col>
    </Row>
  </Header>
</template>

<script setup>
import {commonStore} from "@/store/store";
import {computed} from "vue";
import CustomBreadCrumb from '/src/components/main/components/custom-bread-crumb';
import router from "@/router";

const store = commonStore()

const emit = defineEmits(['toggleCollapse'])

const rotateIcon = computed(() => {
  return [
    'menu-icon',
    store.isCollapse ? 'rotate-icon' : ''
  ]
})

// 调用父组件的方法
const collapsedSide = () => {
  store.changeCollapse(true);
  emit('toggleCollapse');
  console.log(rotateIcon.value)
}
</script>

<style scoped lang="less">
@import "./header-bar.less";
</style>
